<template>
  <div>
    <div class="title">
      <i class="el-icon-menu"></i>
      <h1 class="title-name">商品管理</h1>
    </div>

    <div class="search">
      <el-button type="primary" @click="change(1)">添加商品种类</el-button>
      <el-button
        type="success"
        @click="
          change(3);
          checkitem();
        "
        >查看商品类别</el-button
      >
      <el-button type="primary" @click="change(2)">添加商品</el-button>
      <el-button
        type="success"
        @click="
          change(0);
          check();
        "
        >查看商品</el-button
      >
      <el-button style="float: right; margin-top: 14.5px" @click="isTrue()"
        >搜索商品</el-button
      >
      <el-form v-show="show" style="width: 542px; float: right">
        <el-select
          v-model="content1"
          placeholder="一级类别"
          style="width: 120px"
          @change="changeSelect(content1)"
        >
          <el-option
            v-for="(item, index) in classOnes"
            :key="index"
            :label="item.classname"
            :value="item.id"
          >
          </el-option>
        </el-select>

        <el-select
          v-model="content2"
          placeholder="二级类别"
          style="width: 120px"
        >
          <el-option
            v-for="(item, index) in classSeconds"
            :key="index"
            :label="item.classname"
            :value="item.id"
          >
          </el-option>
        </el-select>

        <el-input
          :inline="true"
          placeholder="请输入商品名称"
          v-model="content3"
          style="width: 150px"
        >
        </el-input
        ><el-input
          style="width: 150px"
          :inline="true"
          placeholder="请输入商品条码"
          v-model="content4"
        >
        </el-input>
      </el-form>
    </div>
    <div id="box">
      <div v-show="0 === number">
        <el-table :data="showData1" style="width: 100%">
          <el-table-column
            prop="id"
            v-model="showData1.id"
            label="流水号"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="barcode"
            v-model="showData1.barcode"
            label="条码"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            v-model="showData1.name"
            label="商品名称"
          >
          </el-table-column>
          <el-table-column prop="unit" v-model="showData1.unit" label="单位">
          </el-table-column>
          <el-table-column
            prop="price"
            v-model="showData1.price"
            label="当前售价"
          >
          </el-table-column>
          <el-table-column
            prop="quantity"
            v-model="showData1.quantity"
            label="进货数量"
          >
          </el-table-column>
          <el-table-column
            prop="category1"
            v-model="showData1.category1"
            label="一级类别"
          >
          </el-table-column>
          <el-table-column
            prop="category2"
            v-model="showData1.category2"
            label="二级类别"
          >
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="
                  dialogFormVisible = true;
                  click1(scope.$index, scope.row);
                "
                >修改</el-button
              >
              <el-button
                @click="modify(scope.$index, scope.row)"
                type="success"
                plain
                v-if="scope.row.status == 0"
                size="mini"
                >开启</el-button
              >
              <el-button
                type="warning"
                plain
                v-else
                size="mini"
                @click="modify(scope.$index, scope.row)"
                >锁定</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          background
          :current-page="currentpage"
          layout="prev, pager, next"
          :total="form1.length"
          :page-size="pageSize"
          @prev-click="pre"
          @next-click="next"
          @current-change="pageChange"
          align="right"
          v-if="form1.length > pageSize"
        >
        </el-pagination>
        <!-- 修改商品属性 -->
        <el-dialog title="修改商品属性" :visible.sync="dialogFormVisible">
          <el-form :model="reviseData" :inline="true">
            <el-form-item label="商品ID">
              <el-input
                v-model="reviseData.id"
                disabled="disabled"
                autocomplete="off"
                required="true"
              ></el-input>
            </el-form-item>

            <el-form-item label="商品条码">
              <el-input
                v-model="reviseData.barcode"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form inline="true">
              <el-form-item label="商品名称">
                <el-input
                  v-model="reviseData.name"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="单位">
                <el-input
                  v-model="reviseData.unit"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="当前售价">
                <el-input
                  v-model="reviseData.price"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-form>

            <el-form-item label="一级类别">
              <el-select
                v-model="reviseData.category_1"
                style="width: 300px"
                placeholder="一级类别"
                @change="changeSelect(reviseData.category_1)"
              >
                <el-option
                  v-for="(item, index) in classOnes"
                  :key="index"
                  :label="item.classname"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="二级类别">
              <el-select
                v-model="reviseData.category_2"
                placeholder="二级类别"
                style="width: 300px"
              >
                <el-option
                  v-for="(item, index) in classSeconds"
                  :key="index"
                  :label="item.classname"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button @click="handleEdit()" type="primary">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <div v-show="1 === number">
        <el-form v-model="formInline" :inline="true">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="添加一级类别" name="first"
              ><div v-show="true">
                <el-form
                  :inline="true"
                  :model="formInline"
                  class="demo-form-inline"
                >
                  <el-form-item label="商品类名">
                    <el-input
                      v-model="formInline.name"
                      placeholder="请输入一级商品类名"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="描述" :inline="true">
                    <el-input
                      v-model="formInline.remarks"
                      placeholder="请输入该类别的备注"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="备注" :inline="true">
                    <el-input
                      v-model="formInline.description"
                      placeholder="请输入该类别的描述"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit()"
                      >添加</el-button
                    >
                  </el-form-item>
                </el-form>
              </div></el-tab-pane
            >
            <el-tab-pane label="添加二级类别" name="second">
              <el-form :model="formInline">
                <el-form-item label="选择一级类名">
                  <el-select
                    v-model="formInline.superclass"
                    placeholder="请选择一级类别"
                    style="width: 300px"
                  >
                    <el-option
                      v-for="(item, index) in classOnes"
                      :key="index"
                      :label="item.classname"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <br />
                <el-form-item label="二级商品类名">
                  <el-input
                    v-model="formInline.name"
                    placeholder="请输入二级商品类名"
                    style="width: 300px"
                  ></el-input>
                </el-form-item>
                <br />
                <el-form-item label="描述" style="margin-left: 57px">
                  <el-input
                    v-model="formInline.remarks"
                    placeholder="请输入该类别的描述"
                    style="width: 300px"
                  ></el-input>
                </el-form-item>
                <br />
                <el-form-item label="备注" style="margin-left: 57px">
                  <el-input
                    v-model="formInline.description"
                    placeholder="请输入该类别的描述"
                    style="width: 300px"
                  ></el-input>
                </el-form-item>
                <br />
                <el-form-item style="margin-left: 98px">
                  <el-button
                    type="primary"
                    @click="onsubmit1()"
                    style="width: 299px"
                    >添加</el-button
                  >
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </div>

      <el-form
        ref="form"
        :inline="true"
        label-width="200px"
        v-show="3 === number"
      >
        <el-form ref="form" :inline="true" :model="classS" label-width="200px">
          <el-form-item label="">
            <el-select
              v-model="classS.classOne"
              placeholder="请选择一级类别"
              @change="changeSelect(classS.classOne)"
            >
              <el-option
                v-for="(item, index) in classOnes"
                :key="index"
                :label="item.classname"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select
              v-model="classS.classSecond"
              placeholder="请选择二级类别"
            >
              <el-option
                v-for="(item, index) in classSeconds"
                :key="index"
                :label="item.classname"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-button type="success" @click="searchfoods()"> 查询</el-button>
        </el-form>

        <el-table :data="showData" style="width: 100%">
          <el-table-column
            prop="id"
            v-model="showData.id"
            label="商品类别ID"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="classname"
            v-model="showData.classname"
            label="商品类别名称"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="remarkclass"
            v-model="showData.remarkclass"
            label="级别"
          >
          </el-table-column>
          <el-table-column
            prop="superclass"
            v-model="showData.superclass"
            label="父级级别"
          >
          </el-table-column>
          <el-table-column
            prop="description"
            v-model="showData.description"
            label="描述"
          >
          </el-table-column>
          <el-table-column
            prop="remarks"
            v-model="showData.remarks"
            label="备注"
          >
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="
                  alertFormVisible = true;
                  click2(scope.$index, scope.row);
                "
                >修改</el-button
              >
              <el-button
                @click="modify1(scope.$index, scope.row)"
                type="success"
                plain
                v-if="scope.row.status == 0"
                size="mini"
                >开启</el-button
              >
              <el-button
                type="warning"
                plain
                v-else
                size="mini"
                @click="modify1(scope.$index, scope.row)"
                >锁定</el-button
              >
              <!-- <el-button
                    @click="modify1(scope.$index, scope.row)"
                    type="success"
                    plain
                    v-if="scope.row.status == 0"
                    size="mini"
                    >开启</el-button
                  >
                  <el-button
                    type="warning"
                    plain
                    v-else
                    size="mini"
                    @click="modify1(scope.$index, scope.row)"
                    >锁定</el-button
                  > -->
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          background
          :current-page="currentpage"
          layout="prev, pager, next"
          :total="tableData.length"
          :page-size="pageSize"
          @prev-click="pre"
          @next-click="next"
          @current-change="pageChange"
          align="right"
          v-if="tableData.length > pageSize"
        >
        </el-pagination>
        <!-- 修改商品种类 -->
        <el-dialog title="修改商品类别" :visible.sync="alertFormVisible">
          <el-form :model="reviseData1">
            <el-form-item label="商品类别ID">
              <el-input
                v-model="reviseData1.id"
                autocomplete="off"
                disabled="disabled"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-form :model="reviseData1">
            <el-form-item label="商品类别名称">
              <el-input
                v-model="reviseData1.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="级别" >
          <el-input  autocomplete="off"></el-input>
        </el-form-item> -->
            <el-form-item label="父级级别">
              <el-input
                v-model="reviseData1.superclass"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="描述">
              <el-input
                v-model="reviseData1.description"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                v-model="reviseData1.remarks"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="alertFormVisible = false">取 消</el-button>
            <el-button @click="handleEdit1()" type="primary">确 定</el-button>
          </div>
        </el-dialog>
      </el-form>
      <!-- 添加商品 -->
      <el-form
        :model="ruleForm"
        :inline="true"
        :rules="rules"
        ref="ruleForm"
        label-width="150px"
        class="demo-ruleForm"
        v-show="2 === number"
      >
        <el-form-item label="条码" prop="barcode">
          <el-input
            v-model="ruleForm.barcode"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="一级商品类型" prop="category_1">
          <el-select
            v-model="ruleForm.category_1"
            placeholder="请选择一级类别"
            @change="changeSelect(ruleForm.category_1)"
          >
            <el-option
              v-for="(item, index) in classOnes"
              :key="index"
              :label="item.classname"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级商品类型" prop="category_2">
          <el-select v-model="ruleForm.category_2" placeholder="请选择二级类别">
            <el-option
              v-for="(item, index) in classSeconds"
              :key="index"
              :label="item.classname"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="单位" prop="unit" >
          <el-input v-model="ruleForm.unit" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="当前售价" prop="price">
          <el-input
            v-model="ruleForm.price"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item style="width: 100%; text-align: center; margin-top: 20px">
          <el-button type="primary" @click="submitForm()" style="width: 200px"
            >添加</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      content1: "",
      mode1: 0,
      content2: "",
      content3: "",
      content4: "",
      activeName: "first",
      tabName: "first",
      show: false,
      alertFormVisible: false,
      dialogFormVisible: false,
      dialogshow: false,

      data: [],
      pageSize: 6,
      currentpage: 1,
      number: 0,
      activeName: "second",
      formInline: {
        name: " ",
        superclass: "",

        description: "",
        remarks: "",
      },
      params: {
        mode: 0,
        limit: 1000,
        page: 1,
      },
      //商品类别
      classS: {
        classOne: "",
        classSecond: "",
      },
      searchOptions: {
        mode: 0,
        content: "",
        limit: 1000,
        page: 1,
      },
      classOnes: [],
      array1: [],
      array2: [],
      classSeconds: [],
      //商品种类表
      tableData: [
        {
          id: 100001, //商品类id
          classname: "肉", //商品类名
          remarkclass: "一级",
          superclass: 0, //商品父类id, 0代表为一级分类
          description: "包括猪肉、牛肉等", //商品描述
          remarks: "", //备注
          status: 0,
        },
      ],
      //商品表
      tableData1: [
        {
          id: 100001, //商品类id
          classname: "肉", //商品类名
          remarkclass: "一级",
          superclass: 0, //商品父类id, 0代表为一级分类
          description: "包括猪肉、牛肉等", //商品描述
          remarks: "", //备注
          status: 0,
        },
      ],
      //商品表
      form1: [
        {
          id: 100001, // 流水号
          barcode: 6921168596485, // 条码
          name: "苏打气泡水", // 商品名称
          unit: "瓶", // 单位
          price: 2.0, // 价格
          quantity: 100, // 存货
          category1: 2, // 一级类别
          category2: 3, // 二级类别
          status: 1,
        },
      ],
      reviseData: {
        id: "",
        barcode: "",
        name: "",
        unit: "",
        price: "",
        category_1: "",
        category_2: "",
      },
      rules: {
        barcode: { required: true, trigger: "blur" },
        category_1: { required: true, trigger: "blur" },
        category_2: { required: true, trigger: "blur" },
        name: { required: true, trigger: "blur" },
        unit: { required: true, trigger: "blur" },
        price: { required: true, trigger: "blur" },
      },
      reviseData1: {
        id: "",
        name: "",
        superclass: "",
        description: "",
        remarks: "",
      },

      //商品添加的表
      ruleForm: {
        barcode: "", // 条码
        name: "", // 商品名称
        unit: "", // 单位
        price: "", // 价格
        category_1: "", // 一级类别
        category_2: "", // 二级类别
      },
    };
  },

  methods: {
    isTrue() {
      console.log(this.show);
      if (this.show === true) {
        this.searchFood();
      }
      this.show = !this.show;
    },
    searchFood() {
      this.judge1();
      console.log(this.searchOptions);
      this.$axios({
        //  console.log(index, row),
        url: "http://server.hloli.cn:23300/api/selProduct",
        method: "post",
        params: this.searchOptions,
      }).then((res) => {
        this.form1 = res.data.data;
        //  this.total = res.data.data.length;
        this.$axios({
          url: "http://server.hloli.cn:23300/api/selProductCategory",
          method: "post",
          params: {
            mode: 0, //0 所有分类, -1 所有一级分类, 1..n 类别ID为1..n的所有二级分类
            limit: 1000, //每页返回多少条
            page: 1, //第几页
          },
        }).then((res) => {
          console.log(res);
          this.tableData = res.data.data;
          this.total = res.data.data.length;
          for (let i = 0; i < this.form1.length; i++) {
            for (let a = 0; a < this.tableData.length; a++) {
              if (this.form1[i].category1 == this.tableData[a].id) {
                this.form1[i].category1 = this.tableData[a].classname;
              }
            }
          }
          for (let i = 0; i < this.form1.length; i++) {
            for (let a = 0; a < this.tableData.length; a++) {
              if (this.form1[i].category2 == this.tableData[a].id) {
                this.form1[i].category2 = this.tableData[a].classname;
              } else if (this.form1[i].category2 == 0) {
                this.form1[i].category2 = "无";
              }
            }
          }
        });
      });
      this.content1 = "";
      this.content2 = "";
      this.content3 = "";
      this.content4 = "";
    },

    judge1() {
      if (this.content1 != "" && this.content2 == "") {
        this.searchOptions.mode = 3;
        this.searchOptions.content = this.content1;
      } else if (this.content1 != "" && this.content2 != "") {
        this.searchOptions.mode = 4;
        this.searchOptions.content = this.content2;
      } else if (this.content3 != "") {
        this.searchOptions.mode = 1;
        this.searchOptions.content = this.content3;
      } else if (this.content4 != "") {
        this.searchOptions.mode = 2;
        this.searchOptions.content = this.content4;
      }
      this.$message({
        type: "success",
        message: "查询成功!",
      });
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },

    click1(index, row) {
      console.log(row.id);
      this.reviseData.id = row.id;
    },
    click2(index, row) {
      this.reviseData1.id = row.id;
    },

    checkitem() {
      this.$axios({
        url: "http://server.hloli.cn:23300/api/selProductCategory",
        method: "post",
        params: {
          mode: 0, //0 所有分类, -1 所有一级分类, 1..n 类别ID为1..n的所有二级分类
          limit: 1000, //每页返回多少条
          page: 1, //第几页
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        this.total = res.data.data.length;

        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].superclass === 0) {
            this.tableData[i].remarkclass = "一级";
            this.tableData[i].superclass = "无";
          } else {
            this.tableData[i].remarkclass = "二级";
            for (let a = 0; a < this.tableData.length; a++) {
              if (this.tableData[a].id === this.tableData[i].superclass) {
                this.tableData[i].superclass = this.tableData[a].classname;
              }
            }
          }
        }
      });
    }, //搜索一级二级商品
    getClassOne() {
      this.$axios({
        method: "post",
        url: "http://server.hloli.cn:23300/api/selProductCategory",
        params: {
          mode: 0,
          limit: 1000,
          page: 1,
        },
      })
        .then((res) => {
          for (let i = 0; i < res.data.data.length; i++) {
            if (
              res.data.data[i].superclass == 0 &&
              this.classOnes.indexOf(res.data.data[i]) == -1
            ) {
              this.classOnes.push(res.data.data[i]);
            }
          }
        })
        .catch(function (error) {
          // handle error
          console.log(1);
        });
    },
    changeSelect(differentdata) {
      this.classSeconds = [];
      //console.log(this.searchParams.classA)
      this.classS.classSecond = "";
      this.classSeconds = [];
      this.$axios({
        method: "post",
        url: "http://server.hloli.cn:23300/api/selProductCategory",
        params: {
          mode: 0,
          limit: 8,
          page: 1,
        },
      })
        .then((res) => {
          //console.log(res);
          for (let i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i].superclass == differentdata) {
              this.classSeconds.push(res.data.data[i]);
              //   console.log(this.classBs);
            }
          }
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        });
    },
    //搜索商品类别
    searchfoods() {
      this.params.mode = this.classS.classOne;
      this.mode1 = this.classS.classSecond;
      this.$axios({
        url: "http://server.hloli.cn:23300/api/selProductCategory",
        method: "post",
        params: {
          mode: 0, //0 所有分类, -1 所有一级分类, 1..n 类别ID为1..n的所有二级分类
          limit: 1000, //每页返回多少条
          page: 1, //第几页
        },
      }).then((res) => {
        console.log(res);
        this.tableData1 = res.data.data;

        console.log(this.params);
        this.$axios({
          url: "http://server.hloli.cn:23300/api/selProductCategory",
          method: "post",
          params: this.params,
        }).then((res) => {
          console.log(res);
          this.tableData = res.data.data;
          console.log(this.tableData);

          let array1 = [];
          for (let i = 0; i < this.tableData.length; i++) {
            if ((this.tableData[i].id = this.mode1)) {
              array1.push(this.tableData[i]);
              break;
            }
          }
          this.tableData = array1;

          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].superclass === 0) {
              this.tableData[i].remarkclass = "一级";
              this.tableData[i].superclass = "无";
            } else {
              this.tableData[i].remarkclass = "二级";
              for (let a = 0; i < this.tableData1.length; a++) {
                if (this.tableData1[a].id === this.tableData[i].superclass) {
                  this.tableData[i].superclass = this.tableData1[a].classname;
                }
              }
            }
          }
        });
      }),
        (this.classS.classOne = "");
      this.classS.classSecond = "";
      this.$message({
        type: "success",
        message: "查询成功!",
      });
    },

    //搜索商品

    //添加一级商品种类
    onSubmit() {
      this.formInline.superclass = 0;
      this.$axios({
        url: "http://server.hloli.cn:23300/api/addProductCategory",
        method: "post",
        params: this.formInline,
      }).then((res) => {
        console.log(res);
      });
      (this.formInline = [
        {
          name: " ",
          superclass: "",

          description: "",
          remarks: "",
        },
      ]),
        this.$message({
          type: "success",
          message: "添加成功!",
        });
    },
    //添加二级商品种类
    onsubmit1() {
      this.$axios({
        url: "http://server.hloli.cn:23300/api/addProductCategory",
        method: "post",
        params: this.formInline,
      }).then((res) => {
        // console.log(res);
      });
      (this.formInline = [
        {
          name: " ",
          superclass: 0,

          description: "",
          remarks: "",
        },
      ]),
        this.$message({
          type: "success",
          message: "添加成功!",
        });
    },
    //修改状态
    modify: function (index, row) {
      this.$confirm("确认修改该活动状态吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (row.status == 1) {
            row.status = 0;
          } else {
            row.status = 1;
          }

          this.$axios({
            url: "http://server.hloli.cn:23300/api/editEmployeeStatus",
            method: "post",
            params: {
              status: row.status,
              id: row.id,
            },
          }).then((res) => {
            console.log(res);
          });
          this.$message({
            type: "success",
            message: "修改成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });
    },
    modify1: function (index, row) {
      this.$confirm("确认修改该活动状态吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (row.status == 1) {
            row.status = 0;
          } else {
            row.status = 1;
          }
          this.$axios({
            url: "http://server.hloli.cn:23300/api/editProductStatus",
            method: "post",
            params: {
              mode: 2,
              status: row.status,
              id: row.id,
            },
          }).then((res) => {
            console.log(res);
          });
          this.$message({
            type: "success",
            message: "修改成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });
    },
    //添加商品
    submitForm() {
      console.log(this.ruleForm);
      this.$axios({
        //  console.log(index, row),
        url: "http://server.hloli.cn:23300/api/addProduct",
        method: "post",
        params: this.ruleForm,
      }).then((res) => {
        alert("修改成功!");
        console.log(res);
      });
    },
    //渲染商品
    check() {
      this.$axios({
        url: "http://server.hloli.cn:23300/api/selProduct",
        method: "post",
        headers: { "Content-Type": "application/json" },
        params: {
          mode: 0,
          content: " ", //留空 所有商品, -1..n 所有有类别ID为-1..n的商品, 肉 所有名称包含"肉"的商品, 1..n 条码为1..n的商品
          limit: 1000, //每页返回多少条
          page: 1, //第几页
        },
      }).then((res) => {
        console.log(res);
        this.form1 = res.data.data;
        this.total = res.data.data.length;
        this.$axios({
          url: "http://server.hloli.cn:23300/api/selProductCategory",
          method: "post",
          params: {
            mode: 0, //0 所有分类, -1 所有一级分类, 1..n 类别ID为1..n的所有二级分类
            limit: 1000, //每页返回多少条
            page: 1, //第几页
          },
        }).then((res) => {
          console.log(res);
          this.tableData = res.data.data;
          this.total = res.data.data.length;

          for (let i = 0; i < this.form1.length; i++) {
            for (let a = 0; a < this.tableData.length; a++) {
              if (this.form1[i].category1 == this.tableData[a].id) {
                this.form1[i].category1 = this.tableData[a].classname;
              }
            }
          }
          for (let i = 0; i < this.form1.length; i++) {
            for (let a = 0; a < this.tableData.length; a++) {
              if (this.form1[i].category2 == this.tableData[a].id) {
                this.form1[i].category2 = this.tableData[a].classname;
              } else if (this.form1[i].category2 == 0) {
                this.form1[i].category2 = "无";
              }
            }
          }
        });
      });
    },
    //渲染商品种类

    //修改商品种类
    handleEdit1(index, row) {
      this.alertFormVisible = false;
      if (this.reviseData1.superclass == "无") {
        this.reviseData1.superclass = 0;
      } else {
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].classname == this.reviseData1.superclass) {
            this.reviseData1.superclass = this.tableData[i].id;
          }
        }
      }
      this.$axios({
        //  console.log(index, row),
        url: "http://server.hloli.cn:23300/api/editProductCategory",
        method: "post",
        params: this.reviseData1,
      }).then(() => {
        this.checkitem();
      }),
        this.$message({
          type: "success",
          message: "修改成功!",
        });
    },
    //修改商品属性
    handleEdit(index, row) {
      this.dialogFormVisible = false;
      this.$axios({
        //  console.log(index, row),
        url: "http://server.hloli.cn:23300/api/editProduct",
        method: "post",
        params: this.reviseData,
      }).then((res) => {
        this.check();
      }),
        this.$message({
          type: "success",
          message: "修改成功!",
        });
    },
    change(index) {
      this.number = index;
    },
    pre: function () {
      this.currentpage--;
    },
    pageChange: function (currentpage) {
      this.currentpage = currentpage;
    },
    next: function () {
      this.currentpage++;
    },
  },
  mounted() {
    this.getClassOne();
    this.$axios({
      url: "http://server.hloli.cn:23300/api/selProduct",
      method: "post",
      headers: { "Content-Type": "application/json" },
      params: {
        mode: 0,
        content: " ", //留空 所有商品, -1..n 所有有类别ID为-1..n的商品, 肉 所有名称包含"肉"的商品, 1..n 条码为1..n的商品
        limit: 1000, //每页返回多少条
        page: 1, //第几页
      },
    }).then((res) => {
      console.log(res);
      this.form1 = res.data.data;
      this.total = res.data.data.length;
      this.$axios({
        url: "http://server.hloli.cn:23300/api/selProductCategory",
        method: "post",
        params: {
          mode: 0, //0 所有分类, -1 所有一级分类, 1..n 类别ID为1..n的所有二级分类
          limit: 1000, //每页返回多少条
          page: 1, //第几页
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        this.total = res.data.data.length;

        console.log(this.tableData);
        for (let i = 0; i < this.form1.length; i++) {
          for (let a = 0; a < this.tableData.length; a++) {
            if (this.form1[i].category1 == this.tableData[a].id) {
              this.form1[i].category1 = this.tableData[a].classname;
            }
          }
        }
        for (let i = 0; i < this.form1.length; i++) {
          for (let a = 0; a < this.tableData.length; a++) {
            if (this.form1[i].category2 == this.tableData[a].id) {
              this.form1[i].category2 = this.tableData[a].classname;
            } else if (this.form1[i].category2 == 0) {
              this.form1[i].category2 = "无";
            }
          }
        }
      });
    });
  },
  computed: {
    showData: function () {
      let start = (this.currentpage - 1) * this.pageSize;
      let end = Math.min(
        this.currentpage * this.pageSize,
        this.tableData.length
      );
      return this.tableData.slice(start, end);
    },
    showData1: function () {
      let start = (this.currentpage - 1) * this.pageSize;
      let end = Math.min(this.currentpage * this.pageSize, this.form1.length);
      return this.form1.slice(start, end);
    },
  },
};
</script>
<style scoped>
.title {
  height: 50px;
  border-bottom: 1px solid #d7d7d7;
  line-height: 50px;
}
.el-icon-menu {
  line-height: 50px;
  font-size: 30px;
  color: #666666;
  float: left;
}
.title-name {
  font-size: 20px;
  margin-left: 15px;
  color: #797979;
  float: left;
}
.search {
  padding: 8px;
  margin-top: 20px;
  line-height: 70px;
  width: 100%;
  height: 70px;
  background-color: #f8f7f7;
  border-radius: 6px;
}
#box {
  margin-top: 20px;
  width: 100%;
  /* padding:20px; */
  height: 500px;
  background-color: #f8f7f7;
  border-radius: 6px;
}
</style>
